Custom JSP taglib. Lets you build HTML-based tree view structures.
For example:
<%@ taglib uri="taglib.tld" prefix="tree" %>
<tree:createTree>
<tree:addNode code="<b>node 1</b>">
<tree:addNode code="node 1.1"/>
<tree:addNode code="node 1.2">
<tree:addNode code="node 1.2.1"/>
<tree:addNode code="node 1.2.2"/>
</tree:addNode>
<tree:addNode code="node 1.3"/>
</tree:addNode>
<tree:addNode code="node 2"/>
</tree:createTree>
and you will get the following structure:
You may disable default connectors between nodes and define own pictures for all nodes
(for nodes with sub-nodes and without them):
<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif">
...
</tree:createTree>
| node 1 |
| node 1.1 |
|
| node 1.2 |
|
| | node 1.2.1 |
|
| | node 1.2.2 |
|
|
| node 1.3 |
|
|
node 2 |
Tag addNode lets you define individual pictures for nodes, as well as a link
for node picture:
<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif">
<tree:addNode code="<b>node 1</b>">
<tree:addNode code="node 1.1"/>
<tree:addNode picture="open.gif" code="node 1.2">
<tree:addNode code="node 1.2.1"/>
<tree:addNode code="node 1.2.2"/>
</tree:addNode>
<tree:addNode code="node 1.3"/>
</tree:addNode>
<tree:addNode code="node 2"/>
</tree:createTree>
and you will get this:
| node 1 |
| node 1.1 |
|
| node 1.2 |
|
| | node 1.2.1 |
|
| | node 1.2.2 |
|
|
| node 1.3 |
|
|
node 2 |
You can define your own connectors:
<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif" verticalConnector="vertical.gif" middleConnector="middle.gif">
<tree:addNode code="<b>node 1</b>">
<tree:addNode code="node 1.1"/>
<tree:addNode picture="open.gif" code="node 1.2">
<tree:addNode code="node 1.2.1"/>
<tree:addNode code="node 1.2.2"/>
</tree:addNode>
<tree:addNode code="node 1.3"/>
</tree:addNode>
<tree:addNode code="node 2"/>
</tree:createTree>
and you will get this:
node 1 |
| node 1.1 |
|
| node 1.2 |
|
|
| node 1.3 |
|
|
node 2 |
With DHTML capable browser you can use parameter dhtml. E.g.:
<tree:createTree defaultConnectors="false" treePicture="tree.gif" nodePicture="leaf.gif" openPicture="open.gif" dhtml="true">
<tree:addNode code="<b>node 1</b>">
<tree:addNode code="node 1.1"/>
<tree:addNode code="node 1.2">
<tree:addNode code="node 1.2.1"/>
<tree:addNode code="node 1.2.2"/>
</tree:addNode>
<tree:addNode code="node 1.3"/>
</tree:addNode>
<tree:addNode code="node 2"/>
</tree:createTree>
and you will get this:
 | node 1
| node 1.1 |
 | node 1.2
| node 1.2.1 |
| node 1.2.2 |
|
| node 1.3 |
|
| node 2 |
You can add scrolling to your tree:
<tree:createTree treePicture="tree.gif" nodePicture="leaf.gif" openPicture="open.gif" dhtml="true" width="125" height="125">
<tree:addNode code="<b>node 1</b>">
<tree:addNode code="node 1.1"/>
<tree:addNode code="node 1.2">
<tree:addNode code="node 1.2.1"/>
<tree:addNode code="node 1.2.2"/>
</tree:addNode>
<tree:addNode code="node 1.3"/>
</tree:addNode>
<tree:addNode code="node 2"/>
</tree:createTree>
and you will get this (try to open all nodes):
 | node 1
| node 1.1 |
 | node 1.2
| node 1.2.1 |
| node 1.2.2 |
|
| node 1.3 |
|
| node 2 |
Also you can create a tree structure in your server side code
(e.g. in Struts action) and pass this stricture as a parameter to
createTree tag. There are two optional parameters:
modelBean - describes an object of com.cj.tree.TreeBean type and
modelName - describes a name for the attribute (request, session, page
or application scope) for object of com.cj.tree.TreeBean type. TreeBean contains setters
and getters for attributes defined for addNode tag. Method getParent()
would return the parent of a particular node. For example:
<%
com.cj.tree.TreeBean root=new com.cj.tree.TreeBean();
root.setCode("Root");
com.cj.tree.TreeBean node1=new com.cj.tree.TreeBean();
node1.setCode("Node 1");
com.cj.tree.TreeBean node2=new com.cj.tree.TreeBean();
node2.setCode("Node 2");
com.cj.tree.TreeBean node11=new com.cj.tree.TreeBean();
node11.setCode("Node 1.1");
root.addChild(node1);
root.addChild(node2);
node1.addChild(node11);
%>
<tree:createTree defaultConnectors="false" verticalConnector="vertical.gif" middleConnector="middle.gif"
modelBean="<%=root%>">
</tree:createTree>
and you will get some like this:
Tags are:
createTree
body tag creates tree-like structure. Parameters are:
1) treePicture Optional parameter.
Describes a picture (image file) for subtrees.
2) openPicture Optional parameter.
In DHTML mode you can use own picture for opened nodes.
3) nodePicture Optional parameter.
Describes a picture (image file) for leafs.
4) dhtml Optional parameter. Possible values
are true and false. Enables/disables DHTML support (client side tree). Default value
if false (disabled).
5) defaultConnectors Optional parameter.
Possible values are true or false. Enables/disables
pseudo-graphics elements between nodes. Default value is true.
6) verticalConnector Optional parameter.
Describes your own image for the vertical connector (see examples at the bottom of this page).
7) middleConnector Optional parameter.
Describes your own image for the middle connector (see examples at the bottom of this page).
8) bottomConnector Optional parameter.
Describes your own image for the bottom connector (see examples at the bottom of this page).
9) id Optional parameter.
Describes a DHTML (XHTML) id for your tree
10) style Optional parameter.
Describes a CSS style.
11) className Optional parameter.
Describes a CSS class
12) width Optional parameter.
Describes a width for your tree
13) height Optional parameter.
Describes a height for your tree.
14) modelBean Optional parameter.
Describes a bean with tree structure.
15) modelName Optional parameter.
Describes a name for the attribute (request, session, page or application scope)
with tree bean.
16) showRoot Optional parameter.
Lets you show/hide the very top node (root). Default value is true.
addNode
Body tag creates one node. Nodes could be nested. Parameters are:
1) code Optional parameter. Describes HTML code for node
2) picture Optional parameter. Defines a picture
(image file) for this node
3) alt Optional parameter. Defines an alternating
text for node's image
4) pictureLink Optional parameter. Defines a link for the picture
5) id Optional parameter. Describes a DHTML (XHTML) id
for this node
6) style Optional parameter.
Describes a CSS style for this node.
7) className Optional parameter.
Describes a CSS class for this node
8) open Optional parameter. Possible values are
true or false. Describes a state for sub-tries (opened/closed). Default
value is true (opened).
9) showAsFolder Optional parameter. Possible values are
true or false. If this value is true node will be shown always
as a folder (the parent's treePicture value will be used). Default
value is false.
10) statusText Optional parameter. Describes a text
in the status line for the hyperlinks
11) codeLink Optional parameter. Possible values are
true or false. If this value is true than node's code (label) will
present a hyperlink for the opening/closing too. Default value is false.
setCode
Body tag defines a code (text) for the node. Parameters are: none.
Note: the evaluation version supports up to 5 nodes
for downloading:
Library: treetag.jar Description: taglib.tld
Samples for images: tree.gif
leaf.gif
open.gif
vertical.gif
middle.gif
bottom.gif
You can buy this component here
© Coldbeans
Comments?
See also Coldtags suite - the largest collection of custom JSP tags.
|